<template>
  <div id="user">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item >用户列表</el-breadcrumb-item>
    </el-breadcrumb><br>

    <!--条件查询-->
    <el-form :inline="true" :model="sysUsersObj" ref="formList" class="demo-form-inline">
      <el-form-item label="用户名">
        <el-input v-model="sysUsersObj.nickName" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="sysUsersObj.realName" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model="sysUsersObj.phone" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryBtn">查询</el-button>
        <el-button @click="resetForm('formList')">
          <i class="el-icon-refresh-right"></i>
          重置?
        </el-button>
      </el-form-item>
    </el-form>

    <el-button type="warning" plain @click="delsBtn">
      <i class="el-icon-zoom-out"></i>
      批量删除
    </el-button>
    <!--数据表格-->
    <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="sysUsersId"
          label="编号">
      </el-table-column>
      <el-table-column
          prop="nickName"
          label="昵称">
      </el-table-column>
      <el-table-column
          prop="username"
          label="登录账号">
      </el-table-column>
      <el-table-column
          prop="password"
          label="登录密码">
      </el-table-column>
      <el-table-column
          prop="phone"
          label="电话号码">
      </el-table-column>
      <el-table-column
          prop="realName"
          label="姓名">
      </el-table-column>
      <el-table-column
          prop="avatarImg"
          label="头像">
        <template slot-scope="scope">
          <el-avatar :size="45" :src="scope.row.avatarImg" @error="errorHandler">
            <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
          </el-avatar>
        </template>
      </el-table-column>

      <el-table-column
          prop="sex"
          label="性别">
      </el-table-column>
      <el-table-column
          prop="state"
          label="冻结/恢复">
        <template slot-scope="scope">
          <el-switch
              v-model="scope.row.state"

              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="2"
              @change="switchState(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
        <el-table-column
            prop="merchantTag"
            label="是否是商户">
          <template slot-scope="scope">
            <span v-if="scope.row.merchantTag=='S001-1'">否</span>
            <span v-if="scope.row.merchantTag=='S001-4'">是</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="supplierTag"
            label="是否是供应商">
          <template slot-scope="scope">
            <span v-if="scope.row.supplierTag=='G001-1'">否</span>
            <span v-if="scope.row.supplierTag=='G001-4'">是</span>
          </template>
        </el-table-column>
      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <el-button
              @click="delUser(scope.row)"
              type="text"
              size="small"
              icon="el-icon-delete">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="PageNo"
        :page-sizes="pageSizeList"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "User",
  data() {
    return {
      //批量选中的row
      multipleSelection: [],
      //查询条件对象
      sysUsersObj: {
        nickName: "",
        realName: "",
        phone: ""
      },
      // 当前页号
      pageNo: 1,
      // 当前页大小
      pageSize: 5,
      // 总记录数
      total: 0,
      // 页大小列表
      pageSizeList: [2, 5, 10, 20],
      //返回数据对象
      tableData:[],
    }
  },
  methods: {
    //删除
    delUser(row) {
      //弹出问框
      this.$confirm('是否确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        //确定
        const { data: res } = await this.$http.post(`/sysUsers/delSysUser`,row);
        this.$message.success(res);
        //界面刷新
        this.queryBtn();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    //批量删除
    delsBtn() {
      if(this.multipleSelection.length === 0)
        return this.$message.info("请先选中你要删除的用户！")
      this.$confirm('是否确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        //确定
        const { data: res } = await this.$http.post(`/sysUsers/delsSysUser`,this.multipleSelection);
        this.$message.success(res);
        //界面刷新
        this.queryBtn();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    //冻结/恢复用户
    async switchState(row) {
      const result = await this.$http.post('/sysUsers/switchState',row);
      if(result.status === 200)
        this.$message.success(result.data)
    },
    //查询
    async queryBtn() {
      const { data: res } = await this.$http.post(`/sysUsers/getSysUserList/${this.pageNo}/${this.pageSize}`,this.sysUsersObj);
      this.tableData = res.rows;
      this.total = res.total
    },

    //重置
    resetForm(formName) {
      console.log(formName)
      console.log(this.$refs[formName])
      this.$refs[formName].resetFields();
    },
    //页大小改变
    handleSizeChange(val) {
      this.pageSize = val
      this.queryBtn()
    },
    //当前页改变
    handleCurrentChange(val){
      this.pageNo = val
      this.queryBtn()
    },
    //批量选择
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //头像展示失败
    errorHandler() {
      return true
    },
  },
  created(){
    this.queryBtn();
  }
}
</script>

<style scoped>

</style>